<template>
  <ul class="footer">
    <li :class="{ 'is-active': currentRoute === 'index' }" @click="goToIndex">
      <i class="fa fa-home"></i>
      <p>首页</p>
    </li>
    <li
      :class="{ 'is-active': currentRoute === 'discover' }"
      @click="toBusinessList(1)"
    >
      <i class="fa fa-compass"></i>
      <p>发现</p>
    </li>
    <li
      :class="{ 'is-active': currentRoute === 'orderlist' }"
      @click="goToOrderlist"
    >
      <i class="fa fa-file-text-o"></i>
      <p>订单</p>
    </li>
    <li :class="{ 'is-active': currentRoute === 'wode' }" @click="goToWode">
      <i class="fa fa-user-o"></i>
      <p>我的</p>
    </li>
  </ul>
</template>

<script>
import { ref, onBeforeMount, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faHome, faCompass, faFileTextO, faUserO } from '@fortawesome/free-solid-svg-icons';

export default {
  components: {
    FontAwesomeIcon,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const currentRoute = ref('index');

    const updateActiveRoute = (path) => {
      const routes = {
        '/': 'index',
        '/businessList': 'discover',
        '/orderList': 'orderlist',
        '/userProfile': 'wode',
      };
      currentRoute.value = routes[path] || 'index';
    };

    const goToIndex = () => {
      router.push('/');
    };

    const toBusinessList = (orderTypeId) => {
      router.push({
        path: '/businessList',
        query: { orderTypeId: orderTypeId },
      });
    };

    const goToOrderlist = () => {
      router.push('/orderList');
    };

    const goToWode = () => {
      router.push('/userProfile');
    };

    onBeforeMount(() => {
      updateActiveRoute(route.path);
    });

    watch(() => route.path, (newPath) => {
      updateActiveRoute(newPath);
    });

    return {
      currentRoute,
      goToIndex,
      toBusinessList,
      goToOrderlist,
      goToWode,
    };
  },
};
</script>

<style>
.wrapper .footer {
  width: 100%;
  height: 14vw;
  background-color: #fbfbfb;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .footer li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #b3b3b3;
  user-select: none;
  cursor: pointer;
}
.wrapper .footer li.is-active {
  color: #0097ff;
}
.wrapper .footer li.is-active p:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fbfbfb;
  margin-top: 0.5vw;
}
.wrapper .footer li p {
  font-size: 2.8vw;
}
.wrapper .footer li i {
  font-size: 5vw;
}
</style>